<!-- 商家入驻 -->
<template>
	<view class="business">
		<view class="bunImg">
			<view class="img">
				<view class="title1">商家封面
					<span
						style="display: inline-block;color: #dddede;margin-left: 10rpx">{{ `${fileList.length == 0?imgLength:fileList.length} / 6` }}</span>
					<span v-if="fileList.length != 0" style="display: inline-block;color: #1281c6;margin-left: auto"
						@click="toShopImg">去编辑</span>
				</view>
				<view style="font-size: 22rpx;letter-spacing: 2rpx;margin-bottom: 20rpx">建议上传清晰的图片，便于全方位展示形象</view>
				<view class="img-item">
					<u-upload v-if="isShow" :show-progress="false" max-count="6" ref="uUpload"
						@on-choose-complete="onChooseComplete" :auto-upload="false" @on-remove="removeImg"
						style="margin: 0rpx">
					</u-upload>
					<!--          <u-empty v-if="fileList.length == 0" style="margin: 10rpx auto" text="暂无图片，快去上传吧" mode="favor"></u-empty>-->
					<view v-else style="display: flex;flex-wrap: wrap">
						<u-image width="200rpx" border-radius="10rpx" height="200rpx"
							style="margin-right: 20rpx;margin-top: 20rpx;border-radius: 20rpx" v-for="item in fileList"
							:key="index" :src="IMG_URL+item.image"></u-image>
					</view>
				</view>
			</view>
			<view style="font-size: 28rpx;margin-bottom: 20rpx;">
				商家信息
			</view>
			<view class="msg">
				<view class="item">
					<view class="i1">商家名称</view>
					<u-input v-model="shopInfo.name" :clearable="false" input-align="right" placeholder="请输入商家名称" />
				</view>
				<view class="item">
					<view class="i1">联系电话</view>
					<view class="i2">
						<u-input v-model="shopInfo.mobile" :clearable="false" maxlength="13" input-align="right"
							type="number" placeholder="请输入电话号码" />
					</view>
				</view>
				<view class="item">
					<view class="i1">详细地址</view>
					<u-input v-model="shopInfo.address" :clearable="false" input-align="right" type="picker"
						placeholder="请填写详细地址" />
				</view>
				<view class="item">
					<view class="i1">商家介绍</view>
					<u-input v-model="shopInfo.description" type="textarer" height="100" auto-height="true"
						input-align="right" placeholder="请输入商家介绍" />
				</view>
				<view class="item" v-if="flag">
					<view class="i1">商家标签</view>
					<u-input @click="getSubTit" :clearable="false" :disabled="true" maxlength="6" input-align="right"
						type="number" placeholder="请选择商家标签>" />
				</view>
			</view>
			<view v-if="isShow">
				<u-button :custom-style="customStyle" @click="submit" shape="circle">上传申请</u-button>
			</view>
			<view v-else>
				<u-button :custom-style="customStyle" @click="edit" shape="circle">修改商家信息</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
		<!-- 标签选择 -->
		<u-popup v-model="show" mode="bottom" :closeable="true">
			<view class="popMargin">
				<!-- 内容多选 -->
				<view style="min-height: 30vh;">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox v-model="item.is_disabled" @change="checkboxChange"
							v-for="(item, index) in shopLabel" :key="index" :name="item.id">{{item.title}}
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<!-- 按钮 -->
				<view style="margin-top: 20rpx;">
					<u-button type="success" @click="update()">确认</u-button>
				</view>
				<view style="margin-top: 20rpx;">
					<u-button @click="show=false">取消</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		pathToBase64
	} from "image-tools";
	import {
		addShop,
		getShop,
	} from "../../../api/business";
	import {
		editShop,
		getShopList,
		UpdateShopList
	} from "../../../api/shop";
	import {
		editGamer,
		getGamerByUserId
	} from "../../../api/gamer";
	import {
		IMG_URL
	} from "../../../config/URL";

	export default {

		onShow() {
			if (uni.getStorageSync('shopInfo')) {
				for (const key in this.shopInfo) {
					this.shopInfo[key] = uni.getStorageSync('shopInfo')[key]
				}
				this.fileList = uni.getStorageSync('shopInfo').links
				this.isShow = false
				this.flag = uni.getStorageSync('userInfo').flag
			}
		},

		data() {
			return {
				flag: '',
				imgLength: 0,
				IMG_URL,
				shopLabel: {},
				show: false,
				isShow: true,
				fileList: [],
				shopInfo: {
					address: '',
					links: '',
					mobile: '',
					description: '',
					name: ''
				},
				customStyle: {
					marginTop: '20px',
					color: '#fff',
					backgroundColor: '#2bdb70'
				},
				List: [],
			}
		},

		methods: {
			async update() {
				const res = await UpdateShopList(this.List)
				if (res.data.code === 200) {
					this.$refs.uToast.show({
						title: res.data.data,
						type: 'success',
					})
				}
				if (res.data.code != 200) {
					this.$refs.uToast.show({
						title: res.data.msg,
						type: "error"
					})
				};
				this.show = false
			},
			// 复选框
			checkboxGroupChange(e) {
				this.List = e
			},
			checkboxChange(e) {},
			async getSubTit() {
				const res = await getShopList()
				this.shopLabel = res.data.data.records
				this.show = true
			},
			addConfirm(val) {
				for (const key in val) {
					this.shopInfo.address += ((val[key].label) + ' ')
				}
			},
			addCancel(val) {},
			//上传照片回调
			onChooseComplete(lists) {
				// pathToBase64(lists[0].url).then(data=>{
				//   this.shopInfo.cover = data
				// })
				let links = []
				lists.map(e => {
					pathToBase64(e.url).then(data => {
						links.push(data)
					})
				})
				this.imgLength = lists.length
				this.shopInfo.links = links
			},
			//删除照片回调
			removeImg(index, lists) {
				this.imgLength = lists.length
			},

			async edit() {
				for (const e in this.shopInfo) {
					if (!this.shopInfo[e]) {
						this.$refs.uToast.show({
							title: '请完善数据',
							type: 'error',
						})
						return false
					}
				}

				if (!this.verifyPhone) {
					this.$refs.uToast.show({
						title: '请输入合法手机号',
						type: 'error',
					})
					return
				}

				uni.showLoading({
					title: '修改中'
				});

				const res = await editShop({
					mobile: this.shopInfo.mobile,
					address: this.shopInfo.address,
					description: this.shopInfo.description,
					name: this.shopInfo.name,
				})
				if (res.data.code == 200) {
					const shop = await getShop({
						f_user_id: uni.getStorageSync('userInfo').id
					})
					uni.setStorageSync('shopInfo', shop.data.data);
					uni.hideLoading();
					uni.showToast({
						title: '修改成功',
						duration: 2000
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			},
			toShopImg() {
				uni.navigateTo({
					url: '/subPages/subUser/businessettled/shopImg/index'
				})
			},

			async submit() {

				uni.showLoading({
					title: '上传中'
				});

				for (const e in this.shopInfo) {
					if (!this.shopInfo[e]) {
						this.$refs.uToast.show({
							title: '请完善数据',
							type: 'error',
						})
						uni.hideLoading();
						return false
					}
				}


				if (!this.verifyPhone) {
					this.$refs.uToast.show({
						title: '请输入合法手机号',
						type: 'error',
					})
					uni.hideLoading();
					return
				}

				const res = await addShop({
					...this.shopInfo
				})
				if (res.data.code == 200) {

					const shop = await getShop({
						f_user_id: uni.getStorageSync('userInfo').id
					})

					if (shop.data.code != 500) {
						uni.setStorageSync('shopInfo', shop.data.data);
						uni.showToast({
							title: '申请成功',
							duration: 2000
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/Home/Home'
							})
							this.isLoading = true
						}, 1000)
					} else {
						uni.showToast({
							title: shop.data.msg,
							duration: 2000,
							icon: 'error'
						});
					}
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'error'
					});
					uni.hideLoading();
				}
				uni.hideLoading();
			}

		},
		computed: {
			verifyPhone() {
				return /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(this.shopInfo.mobile);
			}
		}
	}
</script>

<style lang="scss">
	.popMargin {
		margin: 120rpx 30rpx 20rpx 30rpx;
	}

	.business {
		min-height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;

		.bg {
			display: flex;
			flex-direction: column;
			padding: 40rpx 30rpx;

			.slot-btn {
				width: 690rpx;
				height: 300rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgb(244, 245, 246);
				border-radius: 10rpx;
			}

			.slot-btn__hover {
				background-color: rgb(235, 236, 238);
			}

		}

		.bunImg {
			flex: 1;
			background-color: #FFFFFF;
			border-top-left-radius: 25rpx;
			border-top-right-radius: 25rpx;
			padding: 40rpx 30rpx;

			.img {
				margin-bottom: 20rpx;

				.title1 {
					font-size: 28rpx;
					margin-bottom: 20rpx;
					display: flex;
				}

				.img-item {
					margin-top: 20rpx;
					display: flex;
				}
			}
		}

		.msg {
			color: black;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			background-color: #f7f7f8;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			font-size: 26rpx;
		}
	}
</style>
